<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/jquery-confirm.min.css">

		<style>
			body {
				background: transparent;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				/*padding-top: 40px;*/
				padding-bottom: 50px;
				/*-webkit-perspective: 1200px;
				-moz-perspective: 1200px;
				-ms-perspective: 1200px;
				perspective: 1200px*/
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 80vw;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				/*height: 100vw;*/
			}
			
			.terminal-card {
				box-shadow: 2px 2px 20px #888888;
			}
			
			.terminal-card .mui-card-header {
				background-color: #007AFF;
				text-align: center;
				font-size: 6vw;
				height: 15vw;
				line-height: 10vw;
				color: white;
			}
			
			.speedchart {
				width: 80vw;
				height: 50vw;
			}
			
			.mui-table {
				text-align: center;
				border-top: solid;
				border-top-color: gainsboro;
				padding-top: 10px;
				line-height: 10vw;
			}
			
			.mui-table thead {
				color: gainsboro;
				font-size: medium;
			}
			
			.mui-table tbody {
				color: deepskyblue;
				font-size: large;
			}
			
			.mui-card-footer {
				display: block;
			}
			
			.cmdbutton {
				width: 27%;
				margin-left: 5%;
				margin-top: 5%;
			}
			
			.smallinfo {
				font-size: small;
				position: absolute;
				right: 10px;
				top: 8vw;
				float: right;
			}
			
			.mutil-cmd-div {
				text-align: center;
				font-size: large;
			}
			
			.mutil-cmd-div button {
				font-size: large;
				width: 80%;
			}
			
			#addnewterminal {
				width: 100%;
				background: #8a6de9;
				line-height: 1.42;
				display: inline-block;
				margin-bottom: 0;
				padding: 6px 12px;
				cursor: pointer;
				margin: 0 auto;
				border: 1px solid #8a6de9;
				font-size: 17px;
			}
			
			.mui-card {
				/*width: 80%;
				left: 10%;*/
				box-shadow: 0px 0px 0px #333333;
				border: 0px;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				background-color: white;
			}
			
			.mui-card-header {}
			
			.mui-card-header>img:first-child {
				width: 40%;
				height: auto;
				margin-left: 30%;
				margin-top: 20px;
			}
			
			.terminalNameSpan {
				text-align: center;
				color: white !important;
				font-size: large;
			}
			
			.mui-input-row {
				border-color: #9966ff;
				border: 1px solid #9966FF;
				border-radius: 5px;
				width: 80%;
				left: 10%;
				margin-top: 15px;
			}
			
			.mui-input-row label~input {
				width: 62%;
				text-align: left;
			}
			
			.mui-input-row label {
				background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#9933cc), to(#6699ff));
				color: white;
				font-size: large;
				font-size: 1em;
				height: 100%;
				width: 35%;
				padding: 11px 14px;
			}
			
			.mui-icon-help {
				color: orange;
				position: absolute;
				font-size: xx-large;
				right: 10%;
				top: 20%;
				/*bottom: 0px;*/
			}
			
			.mui-input-row.mui-input-range {
				overflow: visible;
				padding-right: 0px;
			}
			
			.mui-input-group:before,
			.mui-input-group:after,
			.mui-input-group .mui-input-row:after {
				background: none
			}
		</style>

	</head>

	<body>
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header">
				<img src="../images/wifi.png">
				<span class="mui-icon mui-icon-help"></span>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label id="label_wifiname">wifi名称</label>
						<input id="wifissid" type="text" class="mui-input-clear" placeholder="wifi sid">
					</div>
					<div class="mui-input-row">
						<label id="label_wifipassword">wifi密码</label>
						<input id="wifipassword" type="text" class="mui-input-clear" placeholder="wifi password">
					</div>
					<div class="mui-input-row" style="text-align: center;margin-top:40px">
						<button type="button" class="mui-btn mui-btn-primary " id="addnewterminal">开始配置</button>
					</div>
				</form>
			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<!--<div class="mui-card-footer">


</div>-->
		</div>

		<div id="readme" style="display: none;">
			<ol>
				<li style="text-align: left;">确保手机连入wifi。</li>
				<li style="text-align: left;">按住设备上的……</li>
				<li style="text-align: left;">按住控制器“+”键后接通控制器电源，至通信收发指示快速闪烁后松开。</li>
				<li style="text-align: left;">点击“开始配置”按钮。等待配置成功。</li>

			</ol>
			<p> 配置时间长短根据WIFI信号的强弱和启动配置的时机，会有不同，如配置失败，重新在APP中点“开始配置”按钮。</p>
			<h4>指示灯状态</h4>
			<p>WIFI连接成功，WIFI连接指示灯亮，否则灭。</p>
			<p>云服务连接成功，云端连接指示灯亮，否则灭。</p>
			<p>WIFI有数据收发时，通信收发指示灯闪烁。</p>
		</div>

		<div id="readmeen" style="display: none;">
			<ol>
				<li style="text-align: left;">Make your phone connect to the wifi.</li>
				<li style="text-align: left;">press the button ……</li>
				<li style="text-align: left;">press the button “+” untile the light flicket.</li>
				<li style="text-align: left;">press the button in app 'Start Config'</li>

			</ol>
			<p>If failed,please try again.</p>
			<h4>The Light Means</h4>
			<p>WIFI连接成功，WIFI连接指示灯亮，否则灭。</p>
			<p>云服务连接成功，云端连接指示灯亮，否则灭。</p>
			<p>WIFI有数据收发时，通信收发指示灯闪烁。</p>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script src="../js/jquery-confirm.min.js"></script>
		<script src="../js/dateformat.js"></script>
		<script src="../js/esptouch.js"></script>
		<script type="text/javascript" src="../libs/jquery.i18n.properties.min.js"></script>
		<script type="text/javascript">
			var selectStr = '<select class="configtype mui-btn mui-btn-block">';
			var isEn = false;

			function addTerminalCallback(data) {
				//console.log(data);
				$.alert(data.returnMessage);
				//initList();
			}

			function addTerminal(sn) {

				var content = '' +
					'<form action="" class="formName">' +
					'<div class="form-group">' +
					(isEn ? '<label>Type</label>' : '<label>设备类型</label>') + selectStr +
					'</select>' +
					(isEn ? '<label>Name Your Terminal!</label>' : '<label>为您的设备起个名字吧</label>') +
					'<input type="text" placeholder="' + (isEn ? 'Name' : '设备名称') + '" class="name form-control" required />' +
					(isEn ? '<label>SN</label>' : '<label>设备序号</label>') +
					'<input type="text" placeholder="SN" class="sn form-control" readonly="readonly" required value="' + sn +
					'" /></div>' +
					'</form>';
				jQuery.confirm({
					title: (isEn ? 'Add' : '添加此设备'),
					content: content,
					boxWidth: '80%',
					useBootstrap: false,
					buttons: {
						formSubmit: {
							text: (isEn ? 'Submit' : '确认'),
							btnClass: 'btn-blue',
							action: function() {
								var configtype = this.$content.find('.configtype').val();
								var name = this.$content.find('.name').val();
								var sn = this.$content.find('.sn').val();
								if(!name || !sn) {
									$.alert(isEn ? 'Name or SN Cannot be empty!' : '未填写正确');
									return false;
								}
								//console.log(configtype);
								app.addTerminal(configtype, name, sn, addTerminalCallback);
							}
						},
						cancel: {
							text: (isEn ? 'Cancel' : '取消'),
							action: function() {

							}
						},
					},
					onContentReady: function() {
						// bind to events
						var jc = this;
						this.$content.find('form').on('submit', function(e) {
							// if the user submits the form by pressing enter in the field.
							e.preventDefault();
							jc.$$formSubmit.trigger('click'); // reference the button and click it
						});
					}
				});
			}

			function setTerminalWifi() {
				var wifissid = jQuery("#wifissid").val();
				var wifipassword = jQuery("#wifipassword").val();
				var taskcount = "1"; //jQuery("#taskcount").val();
				if(plus) {
					plus.esptouch.setTerminalWifi(wifissid, wifipassword, taskcount, function(result) {
						$.confirm({
							title: (isEn ? 'Success!' : '设备配置成功!'),
							type: 'green',
							content: '' +
								'<form class="mui-input-group">' +
								'<div class="mui-input-row"><label>IP</label>' +
								'<input type="text" class="mui-input-clear" readonly="readonly" value="' + result[1] +
								'"/> </div><div class="mui-input-row"><label>Mac</label>' +
								'<input type="text" class="mui-input-clear" readonly="readonly" value="' + result[0] +
								'"/></div> </form>',
							buttons: {
								confirm: {
									text: (isEn ? 'confirm' : '立刻添加'),
									action: function() {
										addTerminal(result[0]);
									}
								},
								cancel: {
									text: (isEn ? 'cancel' : '取消'),
									action: function() {

									}
								}
							}
						});
					}, function(result) {
						$.alert({
							title: (isEN ? 'error' : '设备配置失败!'),
							type: 'red',
							content: result[0]
						});
					});
				}
			}

			function getWifi() {
				if(plus) {
					plus.esptouch.getWifi(function(result) {
						jQuery("#wifissid").val(result[0]);
						console.log(result[1]);
					}, function(result) {
						jQuery("#wifissid").attr(result[0]);
					});
				}
			}

			document.addEventListener("plusready", function() {
				getWifi();
			});

			function initList() {

				app.getServerConfig(function(serverconfig) {
					jQuery.each(serverconfig, function(index, data) {
						selectStr += '<option value="' + data.configID + '">' + data.configName + '</option>';

					});
				});
			}

			function changeCallBack() {
				app.freshTerminal();
				initList();
			}

			function initPage() {
				initList();

				if(app.getLanguage() == "en") {
					isEn = true;
					jQuery.i18n.properties({
						name: 'Messages',
						path: '../bundle/',
						mode: 'both',
						language: app.getLanguage(),
						async: true,
						callback: function() {

							jQuery('#label_wifiname').html(i18n_label_wifiname);
							jQuery('#label_wifipassword').html(i18n_label_wifipassword);
							jQuery('#addnewterminal').html(i18n_addnewterminal);

						}
					});
				}

				jQuery(".mui-icon-help").click(function() {
					jQuery.alert({
						title: (isEn ? 'How to use!' : '使用说明!'),
						content: jQuery("#readme").html(),
						theme: 'supervan'
					});
				});

				jQuery("#numbersoftask").change(function() {
					jQuery("#numbersoftasktext").val(this.value);
				})

				jQuery("#addnewterminal").click(function() {
					setTerminalWifi();
				});
				getWifi();
			}
			(function($, doc) {
				$.plusReady(initPage);
			}(mui, document));
			//			jQuery(document).ready(initPage);
		</script>
	</body>

</html>